<script lang="ts" setup>
import { computed, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useBannerStore, useUserStore } from '@/stores';
import dayjs from 'dayjs';

const bannerStore = useBannerStore();
const userStore = useUserStore();
const middleBanners = ref<any>([]);
const orderTypes = ref<any>([
	{
		label: '全部订单',
		icon: 'order-all'
	},
	{
		label: '待付款',
		icon: 'order-pending-payment'
	},
	{
		label: '待使用',
		icon: 'order-pending-use'
	},
	{
		label: '已完成',
		icon: 'order-completed'
	}
]);
const user = computed(() => userStore.user);

onLoad(async () => {
	middleBanners.value = (await bannerStore.getBanners({ positionId: 5 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
});

function toOrderList() {
	uni.navigateTo({
		url: '/pages/order-list/order-list'
	});
}

function toLogin() {
	uni.navigateTo({
		url: '/pages/login/login'
	});
}
</script>

<template>
	<view class="me">
		<x-title-bar></x-title-bar>
		<x-container direction="vertical" gap="40rpx" padding="24rpx 32rpx">
			<x-space align="center">
				<x-avatar :src="userStore.user.avatarUrl"></x-avatar>
				<x-text :size="32" v-if="!user.id" @tap="toLogin">登录/注册</x-text>
				<x-space direction="vertical" v-else>
					<x-text :size="32">{{ userStore.user.nickName }}</x-text>
					<x-text :size="24">注册时间：{{ dayjs(userStore.user.createdAt).format('YYYY-MM-DD') }}</x-text>
				</x-space>
			</x-space>
			<x-card>
				<x-container justify="between">
					<x-text color="#222222" :size="28" bold>我的订单</x-text>
					<x-text color="#666666" :size="24" @tap="toOrderList">查看更多</x-text>
				</x-container>
				<x-divider></x-divider>
				<x-row justify="between">
					<x-col v-for="item in orderTypes">
						<x-text-icon type="order-all" :size="50" @tap="toOrderList">{{ item.label }}</x-text-icon>
					</x-col>
				</x-row>
			</x-card>
			<x-swiper :items="middleBanners" :height="268"></x-swiper>
		</x-container>
	</view>
</template>

<style lang="scss" scoped>
.me {
	min-height: 100vh;
	background: linear-gradient(180deg, #c9e1ff 0%, #e0e5f9 270rpx, #f6f6f6 540rpx);
}
</style>
